<template>
  <div>
    <div>
      <el-button plain type="primary" @click="handleAdd">新增</el-button>
      <el-table
        :data="foodTypeData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
        />
        <el-table-column
          v-if="this.sessionUserId === 1"
          prop="userId"
          label="商家"
        >
          <template slot-scope="scope">
            <div v-for="item in userList" v-if="scope.row.userId === item.id" :key="item.id">
              <p>{{ item.username }}</p>
            </div>
            <div v-else>
              <p />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="类别名称"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
        <el-table-column
          label="操作"
          width="250"
          :fixed="isMobile ? false : 'right'"
        >
          <template slot-scope="scope">
            <el-button size="mini" plain @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px;">
        <el-pagination
          align="center"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import sessionStorage from '../../assets/js/storage'
import axios from 'axios'
import { getWbeRoot } from '../../api/web-site'
import {isMobile} from '../../utils/index'
export default {
  data () {
    return {
      foodTypeData: [{
        id: '',
        name: '',
        userId: '',
        createTime: ''
      }],

      userList: [{
        id: '',
        username: ''
      }],

      sessionUserId: '',

      /* 分页参数 */
      pageSize: 10,
      currentPage: 1,
      total: 0
    }
  },
  computed: {
    isMobile
  },
  created () {
    this.sessionUserId = sessionStorage.getItem('usrId')
    this.getUserList()
    this.getTypeList()
  },

  methods: {
    /* 菜品类别列表 */
    getTypeList () {
      axios.get(getWbeRoot() + '/api/foodType/findAll', {
        async: false,
        params: {
          userId: this.sessionUserId,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(
        response => {
          if (response.data.code === '200') {
            this.foodTypeData = response.data.data
            this.total = response.data.total
          }
        }
      )
    },

    /* 查找所有商家 */
    getUserList () {
      axios.get(getWbeRoot() + '/api/sysUser/findAll', {
        async: false
      }).then(
        response => {
          if (response.status === 200) {
            this.userList = response.data
          }
        }
      )
    },

    /**
     * 每页显示数据条数
     * @param val
     */
    handleSizeChange (val) {
      this.pageSize = val
      this.getTypeList()
    },

    /**
     * 跳转页数
     * @param val
     */
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTypeList()
    },

    /**
     * 新增
     */
    handleAdd () {
      sessionStorage.setItem('type', 'add')
      this.$router.push({name: 'dishes-type-details', params: {type: 'add'}})
    },

    /**
     * 查看详情
     * @param val
     */
    handleView (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('type', 'view')
      this.$router.push({name: 'dishes-type-details', params: {id: val.id, type: 'view'}})
    },

    /**
     * 编辑
     * @param val
     */
    handleEdit (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('type', 'edit')
      this.$router.push({name: 'dishes-type-details', params: { id: val.id, type: 'edit' }})
    },

    /**
     * 删除
     * @param val
     */
    handleDelete (val) {
      axios.get(getWbeRoot() + '/api/foodType/delFood', {
        params: {
          foodTypeId: val.id
        }
      }).then(
        response => {
          if (response.data.code === '200') {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'success'
            })
          } else if (response.data.code === '300') {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'warning'
            })
          } else {
            this.$message.error(response.data.msg)
          }
        }
      )
    }
  }

}
</script>
